<template>
  <div class="home">
    <!-- <van-nav-bar title="报账单录入" left-text="返回" left-arrow @click-left="returnBtn" /> -->
    <van-nav-bar title="报账单详情" left-text="返回" left-arrow @click-left="returnBtn">
      <template #right>
        <div class="" v-if="oper === 'add' || oper === 'edit'">
          <van-button  class="btns-1" size="small" type="primary" @click="handleSave">保存</van-button>
          <van-button  size="small" type="primary"  v-show="checkAuthCode('')" @click="handleSubmit">提交审批</van-button>
        </div>
      </template>
    </van-nav-bar>
    
    <van-tabs :active="active">
      <van-tab title="报账单录入">
        <basicInfo ref="basicInfoForm" @updataBasic="updataBasicFn"></basicInfo>
      </van-tab>
      <van-tab title="费用类型录入">
        <div class="btns-per">
          <van-button  icon="passed" class="btns" color="linear-gradient(to right, #ff6034, #ee0a24)" @click="isShowModel = true">选择费用类型</van-button>
        </div>
        <van-popup v-model:show="isShowModel" :closeable="true" :style="{ height: '45%', width: '90%' }">
          <div class="model">
            <div class="model-head">报账单费用类型选择（可多选）</div>
            <div class="model-content">
              <van-checkbox-group v-model="expenseTypeValues" shape="square">
                <van-cell-group inset>
                  <van-cell
                    v-for="item in getEnumList('ExpenditureReimbursementFeetype')"
                    clickable
                    :key="item.key"
                    :title="item.value"
                  >
                    <template #right-icon>
                      <van-checkbox
                        :name="item.key"
                        checked-color="#ee0a24"
                        @click.stop
                      />
                    </template>
                  </van-cell>
                </van-cell-group>
              </van-checkbox-group>
            </div>
          </div>
        </van-popup>
        <div class="type-1">
          <van-empty description="暂无类型，请选择！" v-if="expenseTypeValues.length === 0" />
          <van-collapse v-model="activeNames" v-else>
            <van-collapse-item title="差旅费" name="1" v-if="expenseTypeValues.includes('01')">
              <travels :routeId="id" :oper="oper" ref="oTravels" ></travels>
            </van-collapse-item>
            <van-collapse-item title="合同费" name="2" v-if="expenseTypeValues.includes('02')">
              <contracts :routeId="id" :oper="oper" ref="oContracts" ></contracts>
            </van-collapse-item>
            <van-collapse-item title="会议费" name="3" v-if="expenseTypeValues.includes('03')">
              <meetings :routeId="id" :oper="oper" ref="oMeetings" ></meetings>
            </van-collapse-item>
            <van-collapse-item title="培训费" name="4" v-if="expenseTypeValues.includes('04')">
              <trainings :routeId="id" :oper="oper" ref="oTrainings" ></trainings>
            </van-collapse-item>
            <van-collapse-item title="市内交通费" name="5" v-if="expenseTypeValues.includes('05')">
              <traffics :routeId="id" :oper="oper" ref="oTraffics" ></traffics>
            </van-collapse-item>
            <van-collapse-item title="因公出国（境）费" name="6" v-if="expenseTypeValues.includes('06')">
              <abroads :routeId="id" :oper="oper" ref="oAbroads" ></abroads>
            </van-collapse-item>
            <van-collapse-item title="其他费" name="7" v-if="expenseTypeValues.includes('07')">
              <others :routeId="id" :oper="oper" ref="oOthers" ></others>
            </van-collapse-item>
          </van-collapse>
        </div>
      </van-tab>
      <van-tab title="收支信息录入">
        <IncomeExpenseInfo ref="incomeExpenseInfoForm" @updataExpenseInfo="updataExpenseInfoFn"></IncomeExpenseInfo>
      </van-tab>
      <van-tab title="附件">
        <van-empty description="暂无附件，请上传！" v-if="oFiles.length === 0" />
        <van-form ref="files">
          <ul class="files-list">
            <li class="van-hairline--bottom" v-for="(item,index) in oFiles" :key="item.id">
              <div class="files-list-1">
                <!-- <van-icon class-prefix="iconfont icon-tupian" size="30" /> -->
                <div class="files-list-content">
                  <p><span class="list-content-hindline">{{ item.original }}</span> {{ bytesToSize(item.size) }}</p>
                  
                  <van-field
                    v-model="item.pickerName"
                    label="附件类型"
                    readonly
                    placeholder="请选择"
                    input-align="right"
                    right-icon="arrow"
                    @click="showPicker1 = true"
                  />
                  <van-popup v-model:show="showPicker1" round position="bottom">
                    <van-picker
                      :columns="getEnumList('ExpenditureReimbursementFeetype')"
                      :columns-field-names="{text: 'value', value: 'key'}"
                      @cancel="showPicker1 = false"
                      @confirm="onConfirmPicker1($event, item)"
                    />
                  </van-popup> 
                </div>
                
              </div>
              <div class="file-ico">
                <p><span>上传于 {{ item.createTime }}</span></p>
                <div class="">
                  <van-button plain size="small" type="success" @click="handlePreview(item)">预览</van-button>
                  <van-button type="danger" style="margin-left: 1rem" size="small" @click="removeFile1(index)">删除</van-button>
                </div>
              </div>
            </li>
          </ul>
        </van-form>
        <div class="btns-per">
          <div class="btns">
            <FileUpload :isShowTip="false" v-model="oFiles" :isShowFileList="false" @uploadedSuccess="uploadedSuccessFn" :disabled="oper === 'view'" />
          </div>
        </div>
        <!-- <AttachmentUpload></AttachmentUpload> -->
      </van-tab>
      <van-tab title="审批进度">
        <div v-if="parseInt(obj.state) >= 2">
          <approveTimeline :businessType="approveOrderBusinessTypes().expenditureReimbursement" :businessId="obj.id"></approveTimeline>
        </div>
        <van-empty description="暂未提交审批！" v-else />
      </van-tab>
    </van-tabs>
    <van-popup v-model:show="showPickerDate" position="bottom">
      <van-date-picker v-model="currentDate1" type="date" @cancel="onCancelDate1" @confirm="onConfirmDate1" />
    </van-popup>
  </div>
  <selectApprove v-model:itemsVisible="showApprove" @cancel="showApprove = false" :business="'2005'" :businessId="obj ? obj.id : null" @doSubmit="doSubmit" />
  <van-popup v-model:show="isShowAttachment" z-index="100000000000000" :style="{ width: '100%',maxHeight: '90vh',  }">
      <attachmentPreview v-model:attachmentId="previewAttachmentId" />
    </van-popup>
</template>


<script setup>
  import { ref, computed, onMounted, watch } from 'vue'
  import { useRoute, useRouter } from "vue-router";
  import basicInfo from '@/h5/views/expenses/components/basicInfo'
  import attachmentPreview from '@/h5/components/attachmentPreview.vue'
  import approveTimeline from '@/h5/components/approveTimeline.vue'
  import { showSuccessToast, showFailToast } from 'vant';

  import {
    approveOrderBusinessTypes,
    alertErrorMsg, alertWarningMsg,
    customValidator,
    getDictList,
    bytesToSize,
    getEnumList, getEnv,
    getListPageSize, isNullOrUndefined, isNullOrUndefinedOrEmpty,
    notifySuccess,
    showIdLabel,
    svc,
    checkAuthCode
  } from "@/config/common"

  import {doGet, doPost, doDownload} from '@/config/http'
  
  // import ExpenseTypeInput from '@/h5/views/expenses/components/expenseTypeInput.vue';
  import IncomeExpenseInfo from '@/h5/views/expenses/components/incomeExpenseInfo.vue';

  // 费用类型
  import travels from '@/h5/views/expenses/components/costType/travels.vue'
  import contracts from '@/h5/views/expenses/components/costType/contracts.vue'
  import meetings from '@/h5/views/expenses/components/costType/meetings.vue'
  import trainings from '@/h5/views/expenses/components/costType/trainings.vue'
  import traffics from '@/h5/views/expenses/components/costType/traffics.vue'
  import abroads from '@/h5/views/expenses/components/costType/abroads.vue'
  import others from '@/h5/views/expenses/components/costType/others.vue'

  import selectApprove from "@/h5/components/selectApprove.vue";

  let id = ref('')
  let oFiles = ref([])
  let oper = ref('')
  let showPicker1 = ref(false)
  let obj = ref(null)
  let dialogApproveVisible = ref(false)
  let showApprove = ref(false)
  let isShowAttachment = ref(false)

  let basicInfoForm = ref(null)
  let oTravels = ref(null)
  let oContracts = ref(null)
  let oMeetings = ref(null)
  let oTrainings = ref(null)
  let oTraffics = ref(null)
  let oAbroads = ref(null)
  let oOthers = ref(null)
  let incomeExpenseInfoForm = ref(null)

  let expenseTypeValues = ref([])
  let isShowModel = ref(false)
  let activeNames = ref(['1'])

  const router = useRouter();
  const route = useRoute()
  let showPickerDate = ref(false)

  let year = new Date().getFullYear()
  let month = new Date().getMonth() + 1
  let day = new Date().getDay()
  let currentDate1 = ref([year, month, day]);
  let previewAttachmentId = ref('')
  let active = ref(0); // 当前激活的步骤索引

  const initObj = async () =>  {
    oper.value = route.query.oper
    id.value = null
    if (route.query.id) {
      id.value = route.query.id
      oFiles.value = await doGet(svc, '/expenditure-reimbursement-file/listByField', {field: 'expenditureReimbursementId', values: id.value}, false)
      oFiles.value = oFiles.value.map(item => {
        item.original = item.attachmentName
        return item
      })

      // let approveObj = await doGet(svc, '/expenditure-reimbursement-travel/listByField', {field: 'expenditureReimbursementId', values: id.value}, false)
      // /approve-order-oper/listByField
      let travels = await doGet(svc, '/expenditure-reimbursement-travel/listByField', {field: 'expenditureReimbursementId', values: id.value}, false)
      let contracts = await doGet(svc, '/expenditure-reimbursement-contract/listByField', {field: 'expenditureReimbursementId', values: id.value}, false)
      let meetings = await doGet(svc, '/expenditure-reimbursement-meeting/listByField', {field: 'expenditureReimbursementId', values: id.value}, false)
      let trainings = await doGet(svc, '/expenditure-reimbursement-training/listByField', {field: 'expenditureReimbursementId', values: id.value}, false)
      let traffics = await doGet(svc, '/expenditure-reimbursement-traffic/listByField', {field: 'expenditureReimbursementId', values: id.value}, false)
      let abroads = await doGet(svc, '/expenditure-reimbursement-abroad/listByField', {field: 'expenditureReimbursementId', values: id.value}, false)
      let others = await doGet(svc, '/expenditure-reimbursement-other/listByField', {field: 'expenditureReimbursementId', values: id.value}, false)

       // 差旅费
      if (travels.length > 0) {
        expenseTypeValues.value.push('01')
      }
      // 合同费
      if (contracts.length > 0) {
        expenseTypeValues.value.push('02')
      }
      // 会议费
      if (meetings.length > 0) {
        expenseTypeValues.value.push('03')
      }
      // 培训费
      if (trainings.length > 0) {
        expenseTypeValues.value.push('04')
      }
      // 市内交通费
      if (traffics.length > 0) {
        expenseTypeValues.value.push('05')
      }
      // 出国费
      if (abroads.length > 0) {
        expenseTypeValues.value.push('06')
      }
      // 其他费
      if (others.length > 0) {
        expenseTypeValues.value.push('07')
      }
    }
  }

  initObj()

  onMounted(() => {
    if (basicInfoForm.value) {
      const { basicInfoData } = basicInfoForm.value
      // console.log('Child component mounted, initial',basicInfoData)
      watch(()=> basicInfoData, (newVal, oldVal) => {
        console.log('Child component mounted, initial',newVal)
    }, {
      deep: true // 启用深度监听
    });
    }
  });

  const updataBasicFn = (data) => {
    obj.value = data
    console.log('obj.value----更新',data)
  }

  const updataExpenseInfoFn = (pays, payees) => {
    obj.value.pays = pays
    obj.value.payees = payees
  }

  const returnBtn = () => {
    router.push({path: '/h5_home'})
  }

  const calcFinalTotal = computed(() => {
    let finalTotal = 0
    if(oTravels.value) {
      oTravels.value.travelsData.travels.map(item => finalTotal += item.total)
    }

    if(oContracts.value) {
      oContracts.value.contractsData.contracts.map(item => finalTotal += item.total)
    }
   
    if(oMeetings.value) {
      oMeetings.value.meetingsData.meetings.map(item => finalTotal += item.total)
    }

    if(oTrainings.value) {
      oTrainings.value.trainingsData.trainings.map(item => finalTotal += item.total)
    }
    
    if(oTraffics.value) {
      oTraffics.value.trafficsData.traffics.map(item => finalTotal += item.total)
    }

    if(oAbroads.value) {
      oAbroads.value.abroadsData.abroads.map(item => finalTotal += item.total)
    }
    
    if(oOthers.value) {
      oOthers.value.othersData.others.map(item => finalTotal += item.total)
    }
    console.log('finalTotal',finalTotal)
    return finalTotal
  })


  async function checkForm(callback) {
    obj.value = basicInfoForm.value.obj
    let tab1Valid = await basicInfoForm.value.handleValidate()
    console.log('tab1Valid',tab1Valid)
    if (tab1Valid && tab1Valid.length > 0) {
      showFailToast('报账信息表单验证不通过，请检查数据。')
      return
    }

    if(oTravels.value) {
      let isTravels = await oTravels.value.handleValidate()
      if (expenseTypeValues.value.includes('01') && isTravels && isTravels.length > 0) {
        showFailToast('费用类型[差旅费]表单验证不通过，请检查数据。')
        return
      }
    }

    if(oContracts.value) {
      let isContracts = await oContracts.value.handleValidate()
      if (expenseTypeValues.value.includes('02') && isContracts && isContracts.length > 0) {
        showFailToast('费用类型[合同报销]表单验证不通过，请检查数据。')
        return
      }
    }

    if(oMeetings.value) {
      let isMeetings = await oMeetings.value.handleValidate()
      if (expenseTypeValues.value.includes('03') && isMeetings && isMeetings.length > 0) {
        showFailToast('费用类型[会议费]表单验证不通过，请检查数据。')
        return
      }
    }

    if(oTrainings.value) {
      let isTrainings = await oTrainings.value.handleValidate()
      if (expenseTypeValues.value.includes('04') && isTrainings && isTrainings.length > 0) {
        showFailToast('费用类型[培训费]表单验证不通过，请检查数据。')
        return
      }
    }

    if( oTraffics.value) {
      let isTraffics = await oTraffics.value.handleValidate()
      if (expenseTypeValues.value.includes('05') && isTraffics && isTraffics.length > 0) {
        showFailToast('费用类型[市内交通费]表单验证不通过，请检查数据。')
        return
      }
    }

    if(oAbroads.value) {
      let isAbroads = await oAbroads.value.handleValidate()
      if (expenseTypeValues.value.includes('06') && isAbroads && isAbroads.length > 0) {
        showFailToast('费用类型[出国（境）费]单验证不通过，请检查数据。')
        return
      }
    }

    if(oOthers.value) {
      let isOthers = await oOthers.value.handleValidate()
      if (expenseTypeValues.value.includes('07') && isOthers && isOthers.length > 0) {
        showFailToast('费用类型[其他费]表单验证不通过，请检查数据。')
        return
      }
    }

    console.log('incomeExpenseInfoForm.value',incomeExpenseInfoForm.value)

    if(incomeExpenseInfoForm.value) {
      let ispaysValidate = incomeExpenseInfoForm.value.handlepaysValidate()
      let ispayeesValidate = incomeExpenseInfoForm.value.handlepayeesValidate()

      if(ispaysValidate && ispaysValidate.length > 0 && ispayeesValidate && ispayeesValidate.length > 0) {
        showFailToast('支出信息表单验证不通过，请检查数据。')
      }
    }
    console.log('calcFinalTotal.value',calcFinalTotal.value)
    if (calcFinalTotal.value === 0) {
      showFailToast('请稍候')
      return
    }
    console.log('obj.value.amount',obj.value)
    if (calcFinalTotal.value !== obj.value.amount) {
      showFailToast('费用类型的合计总金额 [' + calcFinalTotal.value + '] 与报账金额 [' + obj.value.amount + '] 不一致')
      return
    }
    console.log('expenseTypeValues.value',expenseTypeValues.value)
    if (expenseTypeValues.value.length === 0) {
      showFailToast('请选择报账费用类型')
      return
    }
    let o = buildObj()
    console.log('o.itemFiles',o.itemFiles)

    let itemFiles = o.itemFiles.filter(item => item.isInvoice === 'true')
    let isInvoiceValidate = itemFiles.every(item => item.isValidator === true)

    if (!isInvoiceValidate) {
      showFailToast('请完善发票信息！')
      return
    }
    callback()
  }


  const buildObj = () => {

    // obj
    console.log('basicInfoForm.value.basicInfoData',basicInfoForm.value.obj)
    
    // 差旅费
    obj.value.itemFiles = []
    if (expenseTypeValues.value.includes('01')) {
      let travelsData = oTravels.value.travelsData
      obj.value.travels = travelsData.travels
      let FileList1 = []
      travelsData.travelFeeFileList.map(item => {
        if(item.itemFiles && item.itemFiles.length > 0) {
          item.itemFiles.map(item1 => {
            FileList1.push(item1)
          })
        }
      })
      obj.value.itemFiles = [...obj.value.itemFiles, ...FileList1]
    }
    // 合同费
    if (expenseTypeValues.value.includes('02')) {
      let contractsData = oContracts.value.contractsData
      obj.value.contracts = contractsData.contracts
      let FileList2 = []
      contractsData.contractFeeFileList.map(item => {
        if(item.itemFiles && item.itemFiles.length > 0) {
          item.itemFiles.map(item1 => {
            FileList2.push(item1)
          })
        }
      })
      obj.value.itemFiles = [...obj.value.itemFiles, ...FileList2]
    }
    // 会议费
    if (expenseTypeValues.value.includes('03')) {
      let meetingsData = oMeetings.value?.meetingsData
      obj.value.meetings = meetingsData.meetings
      let FileList3 = []
      meetingsData.meetingFeeFileList.map(item => {
        if(item.itemFiles && item.itemFiles.length > 0) {
          item.itemFiles.map(item1 => {
            FileList3.push(item1)
          })
        }
      })
      obj.value.itemFiles = [...obj.value.itemFiles, ...FileList3]
    }
    // 培训费
    if (expenseTypeValues.value.includes('04')) {
      let trainingsData = oTrainings.value.trainingsData
      obj.value.trainings = trainingsData.trainings
      let FileList4 = []
      trainingsData.trainingFeeFileList.map(item => {
        if(item.itemFiles && item.itemFiles.length > 0) {
          item.itemFiles.map(item1 => {
            FileList4.push(item1)
          })
        }
      })
      obj.value.itemFiles = [...obj.value.itemFiles, ...FileList4]
    }
    // 市内交通费
    if (expenseTypeValues.value.includes('05')) {
      let trafficsData = oTraffics.value.trafficsData
      obj.value.traffics = trafficsData.traffics
      let FileList5 = []
      trafficsData.trafficFeeFileList.map(item => {
        if(item.itemFiles && item.itemFiles.length > 0) {
          item.itemFiles.map(item1 => {
            FileList5.push(item1)
          })
        }
      })
      obj.value.itemFiles = [...obj.value.itemFiles, ...FileList5]
    }
    // 出国费
    if (expenseTypeValues.value.includes('06')) {
      let abroadsData = oAbroads.value.abroadsData
      obj.value.abroads = abroadsData.abroads
      let FileList6 = []
      abroadsData.abroadFeeFileList.map(item => {
        if(item.itemFiles && item.itemFiles.length > 0) {
          item.itemFiles.map(item1 => {
            FileList6.push(item1)
          })
        }
      })
      obj.value.itemFiles = [...obj.value.itemFiles, ...FileList6]
    }
    // 其他费
    if (expenseTypeValues.value.includes('07')) {
      let othersData = oOthers.value.othersData
      obj.value.others = othersData.others
      let FileList7 = []
      othersData.otherFeeFileList.map(item => {
        if(item.itemFiles && item.itemFiles.length > 0) {
          item.itemFiles.map(item1 => {
            FileList7.push(item1)
          })
        }
      })
      obj.value.itemFiles = [...obj.value.itemFiles, ...FileList7]
    }
    obj.value.expenditureEconomicId = obj.value.expenditureEconomicId instanceof Array ? obj.value.expenditureEconomicId.join(',') : obj.value.expenditureEconomicId
    obj.value.expenditureSubjectId = obj.value.expenditureSubjectId instanceof Array ? obj.value.expenditureSubjectId.join(',') : obj.value.expenditureSubjectId

    let pays = incomeExpenseInfoForm.value.pays
    let payees = incomeExpenseInfoForm.value.payees
    console.log('payees',payees)
    obj.value.pays = []
    if (pays.length > 0) {
      pays.map(pay => {
        if (!isNullOrUndefinedOrEmpty(pay.payType)
          || !isNullOrUndefinedOrEmpty(pay.settleType)
          || !isNullOrUndefinedOrEmpty(pay.payAccount)
          || !isNullOrUndefinedOrEmpty(pay.pay)
          || !isNullOrUndefinedOrEmpty(pay.amount)
          || !isNullOrUndefinedOrEmpty(pay.paySummary)) {
          pay.amount = obj.value.amount
          obj.value.pays.push(pay)
        }
      })
    }
    obj.value.payees = []
    if (payees.length > 0) {
      payees.map(payee => {
        if (!isNullOrUndefinedOrEmpty(payee.payeeType)
          || !isNullOrUndefinedOrEmpty(payee.expenditureProceedsId)
          || !isNullOrUndefinedOrEmpty(payee.proceedsCompany)
          || !isNullOrUndefinedOrEmpty(payee.proceedsBank)
          || !isNullOrUndefinedOrEmpty(payee.proceedsAccount)
          || !isNullOrUndefinedOrEmpty(payee.expenditureBusinessCardId)
          || !isNullOrUndefinedOrEmpty(payee.businessCardName)
          || !isNullOrUndefinedOrEmpty(payee.businessCardBank)
          || !isNullOrUndefinedOrEmpty(payee.businessCardAccount)
          || !isNullOrUndefinedOrEmpty(payee.payeeSummary)
        ) {
          payee.amount = obj.value.amount
          obj.value.payees.push(payee)
        }
      })
    }
    obj.value.files = []
    if (oFiles.value.length > 0) {
      console.log('this.oFiles.value',oFiles.value)
      obj.value.files = oFiles.value.map(item => {
        if (obj.value.id) {
          return {
            attachmentId: item.id,
            attachmentName: item?.original,
            attachmentType: item?.attachmentType,
            expenditureReimbursementId: obj.value.id
          }
        } else {
          return {
            attachmentId: item.id,
            attachmentName: item?.original,
            attachmentType: item?.attachmentType
          }
        }
      })
    }
    console.log('obj.value-------------',obj.value)
    return obj.value
  }

  const handleSave = () => {
    checkForm(() => {
      let o = buildObj()
      doPost(svc, '/customExpenditureExpenses/saveExpenditureReimbursement', o).then(() => {
        showSuccessToast('保存成功')
        router.push('/h5_home')
      })
    })
  }

  const handleSubmit = () => {
    checkForm(async () => {
      let o = buildObj()
      doPost(svc, '/customExpenditureExpenses/saveExpenditureReimbursement', o, false).then(res => {
        obj.value.id = res['id']
        obj.value.version = res['version']
        showApprove.value = true
      })
    })
  }

  const doSubmit = async (data) => {
    console.log(' obj.value.amount', obj.value.amount)
    if (obj.value.amount > basicInfoForm.value.expenditureApplicationObj.availableAmount) {
      alertErrorMsg('提交报账金额[' + obj.value.amount + ']不能超过事前用款申请单的剩余金额')
      return;
    }
    let o = buildObj()
    o.approveId = data.approveId
    o.approveNodes = data.approveNodes
    doPost(svc, '/customExpenditureExpenses/submitExpenditureReimbursement', o, true).then(() => {
      showApprove.value = false
      showSuccessToast('提交成功')
      router.push('/h5_home')
      // ctx.$tab.closeOpenPage({ path: '/expenditure/expenses/expenditureReimbursement', query: {} })
      
    })
  }

  const handlePreview = (file) => {
    console.log('file',file)
    isShowAttachment.value = true
    setTimeout(() => {
      previewAttachmentId.value = file.id
    },100)
  }

  const uploadedSuccessFn = (file) => {
    console.log('file-----------',file)
    file.pickerVal = ''
    file.pickerName = ''
    oFiles.value.push(file)
  }

  const downloadFile1 = (row) => {
    console.debug('row',row)
    if (row.attachmentId) {
      doDownload(svc, `/customAttachment/download/${row.attachmentId}`, {})
    } else {
      doDownload(svc, `/customAttachment/download/${row.id}`, {})
    }
  }
  const viewFile1 = (row) => {
    attachmentVisible.value = true
    setTimeout(() => {
      if (row.attachmentId) {
        previewAttachmentId.value = row.attachmentId
      } else {
        previewAttachmentId.value = row.id
      }
      console.debug('previewAttachmentId.value',previewAttachmentId.value)
    },100)
  }
  const removeFile1 = (index) => {
    oFiles.value.splice(index, 1)
  }

  function onConfirmDate1(val) {
    console.log('val--------',val.selectedValues)
    formData.value.date = val.selectedValues[0] + '-' + val.selectedValues[1] + '-' + val.selectedValues[2]
    showPickerDate.value = false
  }

  const onConfirmPicker1 = async(data, item) => {
  console.log('data',data)
  item.attachmentType = data.selectedOptions[0].key
  item.pickerName = data.selectedOptions[0].value
  showPicker1.value = false
}
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #eff2f5;
  // background: #Fff;
}
.step-control {
  margin-top: 20px;
}

.files {
  padding: 0 .9375rem;
  background: #fff;
  .files-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .625rem 0;
    .files-head-left {
      display: flex;
      align-items: center;
    }
    & p span {
      padding-left: .9375rem;
    }
  }
  
}
.btns-per {
  width: 100%;
  height: 4rem;
  // background: #ebe1e1;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100000000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.btns {
  margin-right: .9375rem;
}
.btns-1 {
  margin-right: .625rem;
}
.model {
  background: #fff;
}
.model-head {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 2rem 0;
  text-align: center;
}
.model-content {
  padding: 0 1.2rem;
}
.content {
  padding: .625rem 0;
  color: var(--van-gray-10);
  display: flex;
  // align-items: center;
}
.type-1 {
  // height: 50rem;
  height: calc(100vh - 4rem);
  overflow-y: auto;
  padding-bottom: 7rem;
}

.files-list {
  padding: 0 .9375rem;
  li {
    color: var(--van-gray-6);
    background: #fff;
    margin: .625rem 0;
    padding: .625rem;
    border-radius: 4px;
    .files-list-1 {
      
      .files-list-content {
        & p {
          // padding-left: .9375rem;
          // padding-top: .625rem;
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .list-content-hindline {
            font-size: 1rem;
            padding-right: .9375rem;
            font-weight: bold;
            color: #000;
          }
        }
      }
    }
  }
  
}
.file-ico {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.file-downLoad {
  padding-right: 1rem
}
</style>

